<template>

		<el-menu default-active="2" class="el-menu-vertical" background-color="#545c64" text-color="#fff"
			active-text-color="#ffd04b">

			<router-link to="/data">
				<el-menu-item index="Index+''">
					<template slot="title">
				
						<span slot="title">数据统计</span>
					</template>
				</el-menu-item>
			</router-link>

			<el-submenu :index="nav.name+''" v-for="(nav,index1) in navList" :key="index1">
				<template slot="title">
				<!-- 	<i :class="nav.icon"></i> -->
					<span>{{nav.title}}</span>
				</template>
				<router-link :to="item.path" v-for="(item,index2) in nav.children" :key="index2">
					<el-menu-item :index="item.name+''">
						<template slot="title">
							<span slot="title">{{item.title}}</span>
						</template>
					</el-menu-item>
				</router-link>		
			</el-submenu>

            <router-link to="/notice">
				<el-menu-item index="5">
					<span slot="title">公告栏管理</span>
				</el-menu-item>
			</router-link>

		</el-menu>
		
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {

		},
		//直接获取store里的
		//利用计算属性来动态检测navlist的变化，
		computed: {
			navList: {
				get() {
					return this.$store.state.navs.navList
				}
			}
		},
	}
</script>

<style scoped>
	/* 导航栏 */


	.el-menu-item-group .el-menu-item {
		min-width: 160px;
	}


	.el-menu-vertical {
		height: 100%;
	}
</style>
<!-- 			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-setting"></i>
					<span>系统管理</span>
				</template>
				<el-menu-item-group>
					<router-link :to="{name:'admin'}">
						<el-menu-item index="1-1">管理员管理</el-menu-item>
					</router-link>
					<router-link :to="{name:'authority'}">
						<el-menu-item index="1-2">权限管理</el-menu-item>
					</router-link>
				</el-menu-item-group>
			</el-submenu>
				<!-- </router-link> -->

				<!-- 			<router-link :to="{name:'system'}">
				<el-menu-item index="2">
					<i class="el-icon-user"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>
			</router-link>

			<el-menu-item index="3">
				<i class="el-icon-shopping-cart-full"></i>
				<span slot="title">商品管理</span>
			</el-menu-item>
			<el-menu-item index="4">
				<i class="el-icon-document"></i>
				<span slot="title">订单管理</span>
			</el-menu-item>
			<el-menu-item index="5">
				<i class="el-icon-pie-chart"></i>
				<span slot="title">数据统计</span>
			</el-menu-item> -->